<template>
  <div class="exBox">
    <FoorX></FoorX>
    <TopBack textContent="品牌名字"></TopBack>
    <div class="exBox">
      <img class="ggImg" :src="ImgUrl" alt="" />
      <div class="ptTopBox b-b-1">
        <div class="ptTopImgBox flex"><img src="" alt="品牌标志" /></div>
        <div class="ptTopH1">品牌名字品牌名字</div>
        <div class="ptTopFrom">来自英国</div>
      </div>
      <div class="ptTextBox" @click="setPtTextFalh()">
        <p class="ptText" :class="{ ptTextOn: ptTextFalg }">{{ ptText }}</p>
        <div class="ptTextImgBox flex">
          <img
            class="ptTextImg"
            :src="ptTextImg"
            alt=""
            :class="{ ptTextImgOn: ptTextImgFalh }"
          />
        </div>
      </div>
      <div class="hr1"></div>
      <div>
        <div class="ptListH flex b-b-1">全部商品</div>
        <List></List>
        <div class="addTopSx flex">加载更多</div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../TopNav/TopBack";
import FoorX from "../../gj/FoorX";
import List from "../../gj/List";
export default {
  name: "DhwBrandInfo",
  data() {
    return {
      ImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/广告.png"),
      ptTextFalg: true,
      ptTextImgFalh: false,
      ptText:
        "品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介",
      ptTextImg: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/下拉展开.png"),
    };
  },
  methods: {
    setPtTextFalh() {
      this.ptTextFalg = !this.ptTextFalg;
      this.ptTextImgFalh = !this.ptTextImgFalh;
    },
  },
  components: {
    FoorX,
    TopBack,
    List,
  },
};
</script>

<style scoped>
* {
  font-size: 0;
}
.exBox {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 999;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spMsBox {
  margin: 0 0.2rem;
}
.f30c3 {
  font-size: 0.3rem;
  color: #333333;
}
.f30c4c {
  font-size: 0.3rem;
  color: #4c4c4c;
}
.hf30 {
  height: 0.3rem;
  line-height: 0.3rem;
}
.f24c4c {
  font-size: 0.24rem;
  color: #4c4c4c;
}
.b-b-1 {
  border-bottom: 0.01rem solid #cccccc;
}
</style>

<style scoped>
.ggImg {
  display: block;
  width: 100%;
}
.ptTopBox {
  width: calc(100% - 0.4rem);
  height: 0.98rem;
  padding: 0 0.2rem;
  position: relative;
}
.ptTopImgBox {
  width: 0.98rem;
  height: 0.98rem;
  background-color: #fff;
  border: 0.01rem solid #cccccc;
  position: absolute;
  top: -0.22rem;
  left: 0.2rem;
}
.ptTopH1 {
  font-size: 0.28rem;
  color: #333333;
  position: absolute;
  top: 0.2rem;
  left: 1.4rem;
}
.ptTopFrom {
  font-size: 0.2rem;
  color: #4c4c4c;
  position: absolute;
  top: 0.53rem;
  left: 1.4rem;
}
.ptTextBox {
  padding: 0.11rem 0.2rem 0 0.2rem;
}
.ptText {
  max-height: 999999999rem;
  line-height: 0.24rem;
  font-size: 0.18rem;
  color: #4c4c4c;
}
.ptTextOn {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ptTextImgBox {
  height: 0.36rem;
}
.ptTextImgOn {
  transform: rotate(180deg);
}
.hr1 {
  height: 0.2rem;
  background-color: #f2f2f2;
}
.ptListH {
  height: 0.9rem;
  padding: 0 0.2rem;
  font-size: 0.3rem;
  color: #333333;
  justify-content: flex-start;
}
.addTopSx {
  width: 100%;
  height: 1.49rem;
  line-height: 0.73rem;
  font-size: 0.24rem;
  color: #808080;
  text-align: center;
  background-color: #f2f2f2;
}
</style>
